<script setup>
// 爆款文案库
import { reactive, onMounted, ref, computed, watch, nextTick } from "vue";
import { columns, desc } from "./utool/index.js";
// 处理总互动数
import { formatSum } from "@/views/shotstack/utils";
import request from "@/common/utils/request";
// import viewVideo from "@/views/shotstack/components/dialogComponent/ViewVideo.vue";
import viewVideo from "@/views/shotstack/components/dialogComponent/viewVideo.vue";
import { useRoute, useRouter } from "vue-router";
import { nanoid } from "nanoid";
import {
  EyeOutlined,
  QuestionCircleOutlined,
  EllipsisOutlined,
} from "@ant-design/icons-vue";
import store from "@/store/index.js";

// 工具引入
import utils from "@/common/utils/utils.js";
import { message, notification } from "ant-design-vue";
// 获取当前日期, 前三天 和前七天日期的方法
import { getPreviousDates } from "@/views/shotstack/utils/index.js";
// 头部删选标签
import filtersComponent from "@/views/shotstack/CreationCenter/components/filtersComponent.vue";
// 标签组件
const filtersComponentRef = ref(null);

// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref(null)
const vipVisible = ref(false)

const route = useRoute();
const router = useRouter();
const emit = defineEmits(["importUse:item"]);

// 筛选条件
const props = defineProps({
  startTime: {
    type: String,
    default: () => {
      return "";
    },
  },
  endTime: {
    type: String,
    default: () => {
      return "";
    },
  },
  text: {
    type: String,
    default: () => {
      return "";
    },
  },
  filter_collect: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 是否当做组件使用
  isComponents: {
    type: Boolean,
    default: false,
  },
  // 勾选模式, 单选或者多选
  selectType: {
    type: String,
    default: "checkbox",
  },
  showTitleCart: {
    type: Boolean,
    default: true,
  },
});

const state = reactive({
  list: [],
  page: 1,
  pageSize: 10,
  total: 0,
  viewTextvisible: false,
  textUrl: "",
  orderBys: {
    publish_time: "",
  }, //是否开启排序
  selectedRowKeys: [],
  // table 展示的项, 在onMounted 中处理赋值
  columns: [],
  // 筛选时间 0 - 全部 1 - 近一日; 2 - 近三日; 3 - 周榜
  activeTime: "0",
  time: ["", ""],
  // 筛选条件的 开始和结束时间
  startTime: "",
  endTime: "",
  // 关键词搜索
  text: "",
  // 搜索按钮加载状态
  serchLoding: false,
  // 是否禁用日期
  pickerDisable: false,
  // 是否筛选收藏 0 默认 1 收藏
  filter_collect: 0,
  // 标签列表
  filterArr: [],
  hotFilterList: [
    {
      name: "视频总榜",
      id: 1,
      key: 101,
    },
    {
      name: "低粉爆款",
      id: 2,
      key: 102,
    },
    {
      name: "高涨粉率",
      id: 3,
      key: 104,
    },
    {
      name: "高点赞率",
      id: 4,
      key: 105,
    },
  ],
  ranking_type: 101, //默认视频总榜
});

// 选择的标签列表
const tag_ids = computed(() => {
  return filtersComponentRef.value?.getSelectTages;
});

// 获取筛选标签
const getTags = async () => {
  const res = await request.get(
    "work_ai",
    "/user/shotstack/inspirationText/groupTags"
  );
  console.log(res, "标签列表");
  state.filterArr = res.result;
  nextTick(() => {
    filtersComponentRef.value && filtersComponentRef.value.initTag();
  });
};

const viewVideoRef = ref(null);
onMounted(() => {
  // 开启勾选状态, 仅保留需要的项
  if (props.isComponents) {
    const need = ["material_url", "edit"];
    state.columns = columns.filter((ele) => {
      return need.includes(ele.dataIndex);
    });
    state.columns.find((ele) => ele.dataIndex == "material_url").width = 480;
  } else {
    state.columns = JSON.parse(JSON.stringify(columns));
  }
  getTags();

  getExplosiveTextList();
});
// 获取爆款文案库列表
const getExplosiveTextList = async (ranking_type) => {
  const params = {
    tag_ids: tag_ids.value,
    startTime: state.startTime,
    endTime: state.endTime,
    text: state.text,
    page: state.page,
    pageSize: state.pageSize,
    filter_collect: state.filter_collect,
    orderBys: !!state.orderBys.publish_time ? state.orderBys : {},
    ranking_type: ranking_type ? ranking_type : 101,
  };
  const res = await request.get(
    "work_ai",
    "/user/shotstack/inspirationText/list",
    params
  );
  console.log(res, "我的灵感库");
  state.total = res.result.total;
  state.list = res.result.data;
};

const tabChange = (page, pageSize, sorter) => {
  // sorter : ascend: 升序, descend:降序, undefined:无排序
  console.log(page, pageSize, sorter, "页面改变");
  state.page = page.current;
  state.pageSize = page.pageSize;
  // 排序
  if (sorter.order == "ascend") {
    state.orderBys.publish_time = "asc";
  } else if (sorter.order == "descend") {
    state.orderBys.publish_time = "desc";
  } else {
    state.orderBys.publish_time = "";
  }

  getExplosiveTextList();
};

// table 勾选函数
const onSelectChange = (selectedRowKeys) => {
  console.log("selectedRowKeys changed: ", selectedRowKeys);
  state.selectedRowKeys = selectedRowKeys;
};

// 使用
const isUse = async (record) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true
  } else {
    if (record.ai_to_tip != "") {
      message.warning(record.ai_to_tip);
      return;
    }
    const unique_id = nanoid();
    router.push(
      `/mixedCutCreat?id=${record.id}&key=id&viewType=2&openType=creat&isAi=true&unique_id=${unique_id}`
    );
  }
};

// 处理收藏
const collect = async (data) => {
  if (store.getters.isVersionExpired) {
    notification.warn({ message: "您的套餐已到期", duration: 2 });
    vipVisible.value = true

  } else {
    const res = await request.post(
      "work_ai",
      "/user/shotstack/inspirationText/collect",
      data
    );
    console.log(res, "收藏结果");
    getExplosiveTextList();
  }
};

const resetPage = () => {
  state.page = 1;
};
const viewText = (text) => {
  state.viewTextvisible = true;
  state.textUrl = text;
};
const copyText = (url) => {
  utils.copyText(url);
  state.viewTextvisible = false;
  ExplosiveText;
};
watch(
  state.ranking_type, // 要监听的响应式数据
  (newValue, oldValue) => {
    getExplosiveTextList();
  },
  {
    immediate: true, // 是否在初始加载时立即执行回调函数，默认为 false
    deep: false, // 是否深度监听嵌套对象的变化，默认为 false
  }
);

// 获得勾选项
const getSelects = () => {
  const list = state.list.filter((ele) => {
    return state.selectedRowKeys.includes(ele.id);
  });
  console.log(list, "选择的项");
  return list;
};

// 导入该项文案 -- 仅文案导入才会使用
const importUse = (item) => {
  emit("importUse", item);
};

// 勾选导入的文案
const importSelectItem = () => {
  let list = getSelects();
  if (!list.length) return message.error("请勾选想要导入的文案");
  console.log(list, "勾选的文案");
  let text;
  if (props.selectType == "checkbox") {
    text = list.map((ele) => ele.text);
    emit("getText", text);
  } else {
    text = list.map((ele) => ele.text).join(",");
    emit("getText", text);
  }
};

// 筛选标签改变, 发送请求
const tagsChange = () => {
  resetPage();
  getExplosiveTextList();
};

// 点击搜索
const getItemList = () => {
  getExplosiveTextList();
};

// 抖音热点榜筛选
const selectHotKey = (info) => {
  state.ranking_type = info.key;
  getExplosiveTextList(info.key);
};

// 选择筛选的时间
const selectTime = (val) => {
  // debugger
  state.activeTime = state.activeTime == val ? "" : val;
  if (state.activeTime == "" || state.activeTime == "0") {
    state.time = ["", ""];
    state.startTime = "";
    state.endTime = "";
  }

  // 改变后 重新获取数据
  nextTick(() => {
    resetPage();
    getItemList();
  });
};

// 根据
watch(
  () => state.activeTime,
  (nv, ov) => {
    // 有值的时候, 手动调用修改 startTime 和 endTime, 置空筛选日期的时间, 禁用掉日期
    if (nv) {
      switch (nv) {
        case "1":
          state.startTime = getPreviousDates(new Date(), 1);
          state.endTime = getPreviousDates(new Date(), 1);
          state.time = [state.startTime, state.endTime];
          break;
        case "2":
          state.startTime = getPreviousDates(new Date(), 3);
          state.endTime = getPreviousDates(new Date(), 1);
          state.time = [state.startTime, state.endTime];
          break;
        case "3":
          state.startTime = getPreviousDates(new Date(), 7);
          state.endTime = getPreviousDates(new Date(), 1);
          state.time = [state.startTime, state.endTime];
          break;
      }
    }
  },
  {
    immediate: true,
  }
);

// 点击清空
const resetSerchData = () => {
  // 重置搜索的条件
  resetfilterData();
  nextTick(() => {
    getItemList();
  });
};

// 清空搜索条件
const resetfilterData = () => {
  state.time = ["", ""];
  state.startTime = "";
  state.endTime = "";
  state.text = "";
  state.activeTime = "0";
  state.filter_collect = 0;
  resetPage();
};

// 一键仿写
const toCopyWrit = (info) => {
  router.push({
    name: "TextImitation",
    query: {
      afflatusId: info.id,
    },
  });
};

defineExpose({
  getExplosiveTextList,
  resetPage,
  getSelects,
});
</script>

<template>
  <div class="ExplosiveText">
    <div class="smart-clip-header" v-if="props.showTitleCart">
      <div class="smart-clip-header-title_top">{{ desc.title }}</div>
      <div class="smart-clip-header-desc">
        {{ desc.desc }}
      </div>
    </div>

    <!-- 头部筛选条件 -->
    <div class="tags_box">
      <!-- 行业类型等标签筛选 -->
      <filtersComponent
        ref="filtersComponentRef"
        v-show="state.activeKey != 3"
        :tags="state.filterArr"
        @tagsChange="tagsChange"
      ></filtersComponent>
      <!-- 抖音热点榜筛选 -->
      <div class="douyin_hot" v-if="state.activeKey != 3">
        <span class="filter_item_title">抖音热点榜：</span>
        <div class="filter_item_list">
          <div
            class="filter_item_list_item"
            v-for="(hot, index) in state.hotFilterList"
            @click="selectHotKey(hot)"
            :key="hot.id"
            :class="{
              active_select_hotkey: state.ranking_type == hot.key,
            }"
          >
            {{ hot.name }}
          </div>
        </div>
      </div>
      <!-- 日期筛选 -->
      <div class="filter_box">
        <!-- 导入所选文案, 只有当作为弹窗的时候才会展示 -->
        <a-button
          v-if="!props.showTitleCart"
          @click="importSelectItem"
          type="primary"
          ghost
          :size="size"
        >
          <template #icon>
            <PlusOutlined />
          </template>
          导入所选文案
        </a-button>
        <div class="date_box" v-if="state.activeKey != 3">
          <div
            class="date_item date_left"
            @click="selectTime('0')"
            :class="{
              active_select_time: state.activeTime == '0',
            }"
            :style="{
              'border-right-color':
                state.activeTime == 1 ? 'var(--ss-primary-6)' : '#dddddd',
            }"
          >
            全部
          </div>
          <div
            class="date_item"
            @click="selectTime('1')"
            :class="{
              active_select_time: state.activeTime == '1',
            }"
          >
            近1日
          </div>
          <div
            class="date_item"
            :class="{
              active_select_time: state.activeTime == '2',
            }"
            :style="{
              'border-left-color':
                state.activeTime == 1 ? 'var(--ss-primary-6)' : '#dddddd',
              'border-right': 'none',
            }"
            @click="selectTime('2')"
          >
            近3日
          </div>
          <div
            class="date_item date_right"
            :class="{
              active_select_time: state.activeTime == '3',
            }"
            :style="{
              'border-left-color':
                state.activeTime == 2 ? 'var(--ss-primary-6)' : '#dddddd',
            }"
            @click="selectTime('3')"
          >
            周榜
          </div>
        </div>
        <!-- 只有我的灵感才有的提取文案按钮 -->
        <!-- v-if="state.activeKey == 3" -->

        <div class="btns_box">
          <template v-if="props.showTitleCart">
            <a-button
              @click="openExtractcopyRef"
              v-if="state.activeKey == 3"
              type="primary"
              ghost
              :size="size"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              提取文案
            </a-button>

            <!-- v-if="false" -->
            <a-button
              @click="addCopyManually"
              type="primary"
              ghost
              :size="size"
              style="margin-bottom: 14px"
              v-if="state.activeKey == 3"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              手动添加文案
            </a-button>
          </template>
        </div>
        <!-- 所有tab 都有的名称日期搜索 -->
        <div class="right_serch_box">
          <a-input
            allow-clear
            @change="(e) => e.type == 'click' && getMediaList()"
            style="width: 247px"
            v-model:value="state.text"
            placeholder="请输入关键字搜索"
          >
            <template #prefix>
              <SearchOutlined />
            </template>
          </a-input>

          <!-- 日期  -->
          <a-range-picker
            @change="timeChange"
            :disable="state.pickerDisable"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 247px; margin: 0 10px"
            v-model:value="state.time"
            show-time
          />
          <a-button @click="resetSerchData" style="margin-right: 10px"
            >清空</a-button
          >
          <a-button
            type="primary"
            :loading="state.serchLoding"
            @click="
              () => {
                resetPage();
                getItemList();
              }
            "
            >查询</a-button
          >
        </div>
      </div>
    </div>

    <a-table
      :columns="state.columns"
      :data-source="state.list"
      @change="tabChange"
      :pagination="{
        pageSize: state.pageSize,
        current: state.page,
        total: state.total,
        showSizeChanger: false,
        showQuickJumper: true,
      }"
      :row-selection="
        props.isComponents
          ? {
              selectedRowKeys: state.selectedRowKeys,
              onChange: onSelectChange,
              type: props.selectType,
            }
          : null
      "
      :rowKey="props.isComponents ? 'id' : null"
    >
      <template #headerCell="{ column }">
        <!-- 热度值 -->
        <template v-if="column.key == 'score_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title
              >根据时间周期内新增的播放、点赞、评论、分享等指标加权计算
            </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
        <!-- 新增粉丝量 -->
        <template v-if="column.key == 'fans_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title>时间周期内新增的粉丝量 </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
        <!-- 新增点赞量 -->
        <template v-if="column.key == 'like_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title>时间周期内新增的点赞量 </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
        <!-- 新增播放量 -->
        <template v-if="column.key == 'play_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title>时间周期内新增的播放量 </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
        <!-- 涨粉率 -->
        <template v-if="column.key == 'follow_rate_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title>新增粉丝量/新增播放量 </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
        <!-- 点赞率 -->
        <template v-if="column.key == 'like_rate_text'">
          <span> {{ column.title }} </span>
          <a-tooltip>
            <template #title>新增点赞量/新增播放量 </template>
            <question-circle-outlined style="margin-left: 3px" />
          </a-tooltip>
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <!-- 达人信息 -->
        <template v-if="column.key === 'text'">
          <div class="user_msg">
            <div class="user_msg_left">
              <img :src="record.avatar" alt="" />
            </div>
            <div class="user_msg_right">
              <span class="name">{{ record.author }}</span>
              <span>{{ record.publish_time || "--" }}</span>
            </div>
          </div>
        </template>
        <!-- 排行 -->
        <template v-if="column.key === 'rank_value'">
          <div class="rank_value_box">
            <!-- <img v-if="record.rank_value == 1" src="./topOne.png" alt=""> -->
            <img
              v-if="record.rank_value == 1"
              :src="utils.staticPath + 'images/workAi/shotstack/topOne.png'"
              alt=""
            />
            <img
              v-else-if="record.rank_value == 2"
              :src="utils.staticPath + 'images/workAi/shotstack/topTwo.png'"
              alt=""
            />
            <img
              v-else-if="record.rank_value == 3"
              :src="utils.staticPath + 'images/workAi/shotstack/topThree.png'"
              alt=""
            />
            <span
              v-else
              style="
                font-size: 20px;
                font-weight: bolder;
                color: #999;
                line-height: 20px;
              "
              >{{ record.rank_value }}</span
            >
          </div>
        </template>
        <template v-if="column.key === 'edit'">
          <template v-if="!props.isComponents">
            <div class="edit_btns">
              <a-button @click="isUse(record)" size="small">图生视频</a-button>
              <a-button
                @click="
                  collect({
                    inspiration_text_id: record.id,
                    operation: 'collection',
                  })
                "
                v-if="!record.my_collect"
                size="small"
                >收藏</a-button
              >
              <a-button
                @click="
                  collect({
                    inspiration_text_id: record.id,
                    operation: 'cancel',
                  })
                "
                v-else
                size="small"
                >取消收藏</a-button
              >
              <a-button size="small" @click="toCopyWrit(record)"
                >一键仿写</a-button
              >
            </div>
          </template>
          <template v-else>
            <div class="edit_btns">
              <a-button @click="importUse(record)" size="small" type="link"
                >导入文案</a-button
              >
            </div>
          </template>
        </template>
        <!-- <template v-if="column.key === 'share_text'">
          <span>{{
            formatSum([
              +record.collect,
              +record.comment,
              +record.like,
              +record.share,
            ])
          }}</span>
        </template> -->
        <!-- 视频信息 -->
        <template v-if="column.key === 'material_url'">
          <div class="material_url_box" style="">
              <a-popover title="视频名称">
                <template #content>
                  <div class="video_title_text" style="max-width: 400px">
                    {{ record?.title || "暂无标题" }}
                  </div>
                </template>
              <div
                class="video_box"
                v-if="
                  !props.isComponents &&
                  (record.material_url || record.cover_url)
                "
              >
                <img
                  v-if="record.cover_url"
                  :src="record.cover_url"
                  alt=""
                  @click="
                    record.material_url &&
                      viewVideoRef.open(record.material_url)
                  "
                  style="height: 60px; width: 60px; object-fit: contain"
                />
                <video
                  v-else
                  :key="record.material_url"
                  style="height: 60px; width: 60px"
                  @click="
                    record.material_url &&
                      viewVideoRef.open(record.material_url)
                  "
                >
                  <source :src="record.material_url" type="video/mp4" />
                </video>
              </div>
              <div
                style="height: 60px; width: 60px; background: transparent"
                v-else
              >

              </div>
            </a-popover>

              <div
                class="text_item"
                :style="{ 'max-width': props.isComponents ? '' : '240px' }"
                style="text-align: left"
              >

                <a-popover title="文案">
                <template #content>
                  <div class="video_title_text" style="max-width: 400px">
                    {{ record?.text || "暂无文案" }}
                  </div>
                </template>
                <span>
                  {{ record?.text || "暂无文案" }}
                </span>
            </a-popover>

              </div>
            </div>
        </template>
      </template>
    </a-table>
  </div>

  <viewVideo ref="viewVideoRef"></viewVideo>
  <a-modal
    v-model:visible="state.viewTextvisible"
    title="文案预览"
    @cancel="viewTextvisible = false"
  >
    <div class="view_text" style="max-height: 400px; overflow-y: auto">
      {{ state.textUrl }}
    </div>
    <template #footer>
      <a-button
        key="back"
        @click="state.viewTextvisible = false"
        style="border-radius: 5px"
        >取消</a-button
      >
      <a-button
        key="submit"
        type="primary"
        @click="copyText(state.textUrl)"
        style="border-radius: 5px"
        >复制全部</a-button
      >
    </template>
  </a-modal>

    <!-- 充值弹窗 -->
    <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>

<style lang="less" scoped>
.ExplosiveText {
  // 头部
  .smart-clip-header {
    padding: 30px;
    border-radius: 12px;
    // height: 180px;
    min-width: 1140px;
    // margin-top: 20px;
    background: linear-gradient(220deg, #f3f7ff, rgba(159, 191, 255, 0.4));
    display: flex;
    flex-direction: column;

    .smart-clip-header-title_top {
      font-size: 24px;
      color: #0c0d0e;
      line-height: 1.5;
    }

    .smart-clip-header-desc {
      font-size: 14px;
      color: #737a87;
      margin-top: 5px;
      line-height: 1.5;
    }

    .smart-clip-header-btngroup {
      margin-top: 15px;
    }
  }

  .tags_box {
    margin-top: 20px;
    // 日期筛选
    .filter_box {
      margin: 0 0 25px 0;
      display: flex;
      justify-content: space-between;

      .date_box {
        .date_item {
          width: 88px;
          height: 30px;
          // background: pink;
          display: inline-block;
          text-align: center;
          line-height: 30px;
          border: 1px solid #dfdede;
          cursor: pointer;

          &:nth-child(2) {
            border-left: none;
            border-right: none;
          }

          &.active_select_time {
            // border-color:red ;
            border-color: var(--ss-primary-6) !important;
          }
        }

        .date_left {
          border-radius: 8px 0 0 8px;
        }

        .date_right {
          border-radius: 0 8px 8px 0;
        }
      }

      .btns_box {
        display: flex;
        gap: 15px;
      }

      .right_serch_box {
      }
    }

    .douyin_hot {
      display: flex;
      margin-bottom: 10px;

      .filter_item_title {
        color: rgba(28, 31, 35, 0.6);
        padding: 4px 10px;
        margin-right: 16px;
        margin-bottom: 8px;
      }

      .filter_item_list {
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .filter_item_list_item {
          padding: 4px 10px;
          margin-right: 16px;
          margin-bottom: 8px;
          cursor: pointer;
          color: rgba(28, 31, 35, 0.8);

          &:hover {
            background-color: var(--ss-tag-bgc-color);
            color: var(--ss-primary-color);
            border-radius: 20px;
          }

          &.active_select_hotkey {
            background-color: var(--ss-tag-bgc-color);
            color: var(--ss-primary-color);
            border-radius: 20px;
          }
        }
      }
    }
  }

  .edit_btns {
    display: flex;
    gap: 10px;
    justify-content: center;
  }

  // 排行
  .rank_value_box {
    img {
      width: 30px;
      height: 30px;
    }
  }

  // 关联视频
  .material_url_box {
    width: 100%;
    // background: #000;
    display: flex;
    justify-content: space-between;
    gap: 15px;

    .video_box {
      // background: #000;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .text_item {
      flex: 1;
      display: flex;
      align-items: center;
      // max-width: 240px;

      span{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        width: auto;
        cursor: pointer;
      }
      .view_icon {
        margin-left: 10px;
      }
    }
  }

  .user_msg {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;

    .user_msg_right {
      display: flex;
      flex-direction: column;

      .name {
        vertical-align: middle;
        max-width: 8em;
        /* 设置宽度以限制字符数量 */
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 隐藏溢出的文本部分 */
        text-overflow: ellipsis;
        /* 使用省略号表示溢出的文本 */
        text-align: start;
      }
    }

    .user_msg_left {
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
}

.view_text::-webkit-scrollbar {
  display: none;
}

.video_title_text {
  max-height: 500px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    /* 滚动条的宽度 */
    height: 10px;
    /* 滚动条的高度，垂直滚动条可能用得上 */
    // display: none;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块的背景颜色 */
    border-radius: 10px;
    /* 滑块的圆角 */
  }
}
</style>
